<template>
	<view class="avatar content">
		<view class="upload flex_c" v-if="this.authInfo.work_clothes_image.status != 2">
			<image v-if="Array.isArray(this.authInfo.work_clothes_image)" :src="$util.imgurl('/imgs/technician/index/blank_avatar.png')"></image>
			<image v-else :src="this.authInfo.work_clothes_image.image"></image>
			<text v-if="Array.isArray(this.authInfo.work_clothes_image)">你还没有上传头像哦~</text>
			<text v-else-if="this.authInfo.work_clothes_image.status == 1">审核中，请耐心等待</text>
			<text v-else-if="this.authInfo.work_clothes_image.status == 3">审核已被拒绝</text>
			<view class="btn" @click="onUpload">上传头像</view>
		</view>
		
		<view class="require flex_c">
			<view class="header">头像要求</view>
			<view class="detail">
				<p>工装头像即为服务人员形象照，是用户下单选择服务人员时的重要参考因素，请按照以下要求先拍摄好照片后再进行上传:</p>
				<p>1.请身着正装或工装，背靠白墙或浅纯色背景墙，距镜头2米左右，拍摄含腰部到头顶的正面半身照；</p>
				<p>2.身体需摆正，双手自然下垂，头顶及身体两侧留空不要用大头照；</p>
				<p>3.照片须清晰真实，大小不低于750x750像素，不得过度美颜，与实拍照片的对比分数至少为80分。</p>
			</view>
			<view class="photo">
				<view class="title">示例头像</view>
				<image :src="$util.imgurl('/imgs/technician/index/avatar_require.png')"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				authInfo:'',
				status:1,
			}
		},
		methods: {
			onUpload(){
				this.$util.chooseImage({
					count:1,
					crop:{
						width:800,
						height:800
					}
				},res => {
					uni.showLoading({
						title: '上传中',
					})
					this.$util.upload('picture', res.tempFilePaths[0], result=> {
						if (result.code == 0) {
							let obj = {
								work_clothes_image:JSON.stringify({
									image : result.data.url,
									status :this.status,
								})
							}
							this.request.httpTokenRequest({
								url: "/technician.technician/saveAuthInfo",
								method: "post"
							}, obj).then(data => {
								uni.hideLoading()
								this.$util.msg(data.msg)
								if (data.code == 0) {
									this.authInfo.work_clothes_image = {
										image : result.data.url,
										status :this.status,
									}
									this.$util.modal(data.msg)
								}else {
									this.$util.msg(data.msg)
								}
							}, error => {})
						}
					})
				})
			},
		},
		onLoad() {
			this.authInfo = uni.getStorageSync('authInfo')
			this.status = this.authInfo.work_clothes_image.status ? this.authInfo.work_clothes_image.status : 1
		}
	}
</script>

<style lang="scss" scoped>
	.avatar {
		padding: 30rpx;
	}
	.upload {
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 81rpx 56rpx 65rpx;
		image {
			width: 292rpx;
			height: 294rpx;
		}
		text {
			font-size: 28rpx;
			color: #919191;
			line-height: 40rpx;
			margin: 53rpx 0 78rpx;
		}
		.btn {
			width: 576rpx;
			height: 80rpx;
			border-radius: 40rpx;
			border: 1rpx solid #2E7EFA;
			font-size: 32rpx;
			color: #2E7EFA;
			line-height: 80rpx;
			text-align: center;
		}
	}
	
	.require {
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 0 30rpx 52rpx;
		margin-top: 30rpx;
		.header {
			width: 527rpx;
			height: 83rpx;
			background: url(https://qiniu-cdn.maeiyun.com/imgs/technician/index/work_clothes_header.png) 0 0 no-repeat;
			background-size: 100%;
			font-size: 32rpx;
			color: #333333;
			line-height: 83rpx;
			text-align: center;
		}
		.detail {
			p {
				font-size: 26rpx;
				color: #08090A;
				line-height: 37rpx;
			}
			margin: 34rpx 0 102rpx;
		}
		.photo {
			.title {
				margin-bottom: 21rpx;
				font-size: 26rpx;
				color: #08090A;
				line-height: 37rpx;
			}
			image {
				width: 629rpx;
				height: 629rpx;
			}
		}
	}
</style>
